<template>
	<div class="security_settings">
		<div class="items" v-for="(items, i) in state.list" :key="i">
			<span>{{ t(items.text) }}</span>
			<div v-if="items.btns">
		
				<span v-if="items.value === 'real_name'">{{ info[items.value] }}</span>
				<span v-if="items.value !== 'real_name' && items.type != 10">{{ info[items.value] }}</span>
				<!-- 资金密码 -->
				<span v-if="items.value !== 'real_name' && items.type === 10">{{ items.code == 1 ? info[items.value] : '' }}</span>
				<div v-if="items.btns.length > 0">
					<span class="bind_btn" v-for="(item, j) in items.btns" :id="items.text" :key="j" @click="itemClick(items)"> {{ t(item.text) }}</span>
				</div>
			</div>
		</div>

		<Toast v-model:visible="showToast">{{ toast_value }}</Toast>
		<!-- <PopForm ref="FormRef" @nextChange="nextChange" @changeTab="changePasswordChangeTab" @submitData="submitData">
        </PopForm> -->
	</div>
</template>

<script setup lang="ts">
// 国际化使用 homepage
import { onMounted, reactive, ref, watch, defineAsyncComponent, onUnmounted } from 'vue';
import pinia from '@/store/index';
import { storeToRefs } from 'pinia';
import { User } from '@/store/user';
import { useI18n } from 'vue-i18n';
import { NetPacket } from '@/netBase/NetPacket';
import { aaa, bbb, getDeviceId, getRandomSign } from '@/net/Utils';
import { IP } from '@/utils/useStoreMethods';
import PKwebsocket from '@/lolo/Ws';
import { useRouter } from 'vue-router';
// import { WithdrawValidator, againWithdrawValidator } from './validator';
// import eventBus from '@/lolo/eventBus';
const Toast = defineAsyncComponent(() => import('@/components/Toast.vue'));

const { t } = useI18n();
const router = useRouter();
const userInfo = User(pinia);
// const withdrawFormRef = ref();
const showToast = ref(false);
const toast_value = ref('');
// const eyeOpen1 = ref(false);
// const eyeOpen2 = ref(false);
const { info, roleInfo } = storeToRefs(userInfo);
// const moneyModal = ref(false);
// const moneyFormData = ref({
// 	new_password: '',
// 	new_password_confirm: '',
// });
// const rules = {
// 	new_password: [{ validator: WithdrawValidator }],
// 	new_password_confirm: [
// 		{
// 			validator: (val: any) => {
// 				return againWithdrawValidator(val, moneyFormData.value.new_password);
// 			},
// 		},
// 	],
// };

const state: any = reactive({
	roleInfo: JSON.parse(JSON.stringify(roleInfo.value)),
	info: JSON.parse(JSON.stringify(info.value)),
	first: 1,
	checkPhoneOremail: false,
	params: null,
	type: 0,
	formData: null,
	list: [
		{
			text: 'home_page_name',
			value: 'real_name',
			type: 1,
		},
		{
			text: 'home_page_account',
			value: 'full_name',
			btns: [],
			type: 1,
		},
		{
			text: 'home_page_password',
			value: 'hideString',

			btns: [{ text: 'home_page_modify1', icon: 'Group39376', value: 1 }],
			type: 3,
		},
		{
			text: 'home_page_email',
			value: 'email',
			btns: [
				{ text: 'home_page_bind', icon: 'Group39377', value: 0 },
				// { text: '修改', icon: 'Group39376', value: 1 }
			],
			type: 4,
		},
		{
			text: 'home_page_phone_number',
			value: 'mobile',
			btns: [
				{ text: 'home_page_bind', icon: 'Group39377', value: 0 },
				// { text: '修改', icon: 'Group39376', value: 1 }
			],
			type: 5,
		},
		{
			text: 'home_page_fundPassword',
			value: 'hideString',
			btns: [{ text: 'home_page_bind', icon: 'Group39376', value: 1 }],
			type: 10,
		},
	],
});
// 点击修改某一项
const itemClick = (item: any) => {
	if (item.type == 10) {
		if (item.code == 1) {
			router.push({
				name: 'modifyWithdraw',
			});
		} else {
			router.push({
				name: 'bindWithdraw',
			});
		}
		return;
	}
	const urlObj: any = {
		3: 'modifyPassWord', // 修改密码
		4: 'bindEmail', // 绑定邮箱
		5: 'bindPhone', // 绑定手机号
	};
	router.push({
		name: urlObj[item.type],
		params: item,
	});
};

// 关闭资金密码弹窗
// const closeModal = () => {
// 	moneyFormData.value.new_password = moneyFormData.value.new_password_confirm = '';
// };

//   修改资金密码确认
// const submit = () => {
// 	withdrawFormRef.value?.validate().then(({ valid, errors }: any) => {
// 		if (valid) {
// 			let req = NetPacket.req_bind_or_modify_withdraw_password();
// 			req.operate_type = 1;
// 			req.old_password = '';
// 			req.new_password = moneyFormData.value.new_password;
// 			req.role_id = Number(roleInfo.value?.id);
// 			req.step = Number(roleInfo.value?.id);
// 			req.new_password_confirm = moneyFormData.value.new_password_confirm;
// 			PKwebsocket.instance.send(req, true);
// 		} else {
// 			console.warn('error:', errors);
// 		}
// 	});
// };

// 返回是否可以进行修改或绑定资金密码
const handleModifyWithdrawPassword = (res: any) => {
	let findWithdrawPassword = state.list.find((e: any) => e.type == 10);
	// 已绑定资金密码
	if (res.code == 1 || res.withdraw_pwd) {
		findWithdrawPassword.code = 1;
		findWithdrawPassword.btns = [{ text: 'home_page_modify', icon: 'Group39376', value: 1 }];
	} else {
		// 未绑定资金密码
		findWithdrawPassword.code = 2;
		findWithdrawPassword.btns = [{ text: 'home_page_bind', icon: 'Group39376', value: 1 }];
	}
};

// 请求是否可以修改或绑定资金密码
// const getModifyWithdrawPassword = () => {
//   const req = NetPacket.req_open_or_close_withdraw_password();
//   req.operate_type = 4;
//   req.role_id = Number(roleInfo.value?.id);
//   PKwebsocket.instance.send(req, true);
// };
watch(
	roleInfo,
	(val: any) => {
		if (val && val.id) {
			// getModifyWithdrawPassword()
			handleModifyWithdrawPassword(val);
		}
	},
	{ immediate: true }
);

// 修改会员账号和绑定邮箱和绑定手机号
const changeEmailAndPhoneAndAccount = async (params: any, type: number) => {
	let req = NetPacket.req_bind_modify_email();
	// 1为修改会员账号 4 为绑定邮箱 5为绑定手机号
	if (type == 1) {
		req.username = params.account;
	}
	if (type == 4) {
		req.email = params.email;
		req.username = info.value?.full_name as string;
		req.captcha = params.emailCode;
		state.info.email = params.email;
	}
	if (type == 5) {
		req.email = params.codeValue + params.mobile;
		req.username = info.value?.full_name as string;
		req.captcha = params.phoneCode;
		state.info.mobile = req.email;
	}

	req.operate_type = params.operate_type;
	req.agent_id = Number(roleInfo.value?.id); //Local.get('agentid')
	req.aaa = aaa.toString();
	req.bbb = bbb;
	req.ip = await IP();
	let id = await getDeviceId();
	req.sign = getRandomSign(id);
	PKwebsocket.instance.send(req, true, {
		callbackName: 'msg_req_bind_modify_email',
		callback: null,
	});
};

// 请求是否可以更改此账号
const getModifyAccount = () => {
	const req = NetPacket.req_can_modify_account();
	req.newusername = info.value?.real_name || '';
	req.operate_type = 1;
	PKwebsocket.instance.send(req, true, {
		callbackName: 'msg_notify_can_modify_account',
		callback: handleModifyAccount,
	});
};

// 获取后台通知是否可以更改此账号 并监听是否更改成功
const handleModifyAccount = (res: any) => {
	if (state.first == 1) {
		let find = state.list.find((e: any) => e.type == 1);
		if (res.code == 1) {
			find.btns = [{ text: 'home_page_modify', icon: 'Group39376', value: 1 }];
			// find.value = info.value?.full_name
			state.first = 2;
		} else {
			find.btns = [];
		}
	} else {
		if (res.code == 1) {
			changeEmailAndPhoneAndAccount(state.params, 1);
		}
	}
};

// 返回绑定资金密码 回执
// const handleBindOrModifyWithdrawPassword = (res: any) => {
// 	let findWithdrawPassword = state.list.find((e: any) => e.type == 10);
// 	if (res.code == 1) {
// 		// 绑定成功
// 		console.log('#######--', moneyFormData.value);
// 		updateStorePayPwd(moneyFormData.value.new_password);

// 		findWithdrawPassword.code = 1;
// 		findWithdrawPassword.btns = [{ text: 'home_page_modify', icon: 'Group39376', value: 1 }];
// 		moneyModal.value = false;
// 		showToast.value = true;
// 		toast_value.value =t('operation_success')
// 	}
// };

onMounted(async () => {
	let findEmail = state.list.find((e: any) => e.type == 4);
	let findPhone = state.list.find((e: any) => e.type == 5);
	const req_user_info = NetPacket.req_user_info();
	PKwebsocket.instance.send(req_user_info, true);
	// getModifyWithdrawPassword()

	if (info.value?.mobile) {
		findPhone.btns = [];
	}
	if (info.value?.email) {
		findEmail.btns = [];
	}
	getModifyAccount();
	handleModifyWithdrawPassword(roleInfo.value);
	// 回执监听
	// eventBus.on('msg_notify_bind_or_modify_withdraw_password', handleBindOrModifyWithdrawPassword);
});
onUnmounted(() => {
	//eventBus.off('msg_notify_bind_or_modify_withdraw_password', handleBindOrModifyWithdrawPassword);
});
</script>

<style lang="scss" scoped>
@import url(./style.scss);

.bind_container {
	height: max-content;
	padding: 20px 10px;
	.btn_submit {
		height: 44px;
		width: 100%;
		border-radius: 8px;
		margin-top: 16px;
	}
}

.security_settings {
	// background-image: url(/imgs/common/bg_img.webp);
	// background-size: 100% 100%;
	// background-color: #000000;
	height: calc(var(--vh) * 100 - 100px);
	margin-top: 26px;
	padding: 0px 14px;
	overflow-y: auto;
	padding-bottom: 100px;
	.btn_submit {
		height: 44px;
		width: 100%;
		border-radius: 8px;
		margin-top: 80px;
	}
	.items {
		margin-bottom: 14px;
		color: #ffffff;

		.nut-input {
			height: 44px;
			background: var(---, #1d1c3c);
			box-shadow: 0.5px 0.5px 1px 0px #333260 inset;
			border-radius: 8px;
			padding-left: -10px !important;

			.nut-input-inner {
				height: 100%;
				padding-left: 10px;
			}
		}
		.nut-form-item.error.line::before {
			display: none;
		}
		.nut-input--border {
			border-bottom: none;
		}
		> span {
			font-size: 14px;
			display: inline-block;
			margin-bottom: 8px;
			color: #fff;
			font-style: normal;
			font-weight: 500;
			font-family: 'PingFang SC';
		}

		> div {
			padding: 0;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;

			> span {
				height: 44px;
				flex: 2;

				padding: 12px 32px 12px 13px;
				border-radius: 8px;
				background: var(---, #1d1c3c);
				box-shadow: 0.5px 0.5px 1px 0px #333260 inset;
			}

			> div {
				display: flex;
				flex: 1;
				align-items: center;

				.bind_btn {
					flex: 1;
					height: 44px;
					display: flex;
					margin-left: 10px;
					justify-content: center;
					align-items: center;
					color: #fff;
					width: 110px;
					border-radius: 8px;
					background: linear-gradient(180deg, #5567ff 0%, #9e1eff 100%);
				}
			}
		}
	}
}
</style>
